<template>
    <div class="detail_out">
      <img :src="url" alt="">
      <div class="info_out" v-for="(item,index) in urlList" :key="index">
        <div class="name">{{item.info}}</div>
        <div class="info">
          全球选种，200多个品种的比对筛选，只为儿时味道！
          <button class="buy">购买</button>
        </div>

        <div class="good_bnt">
          <span>情商品详</span>
        </div>
        <div class="good_detail" v-for="(item2,index2) in item.url" :key="index2">
          <img :src="item2" alt="">
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "detail",
      data() {
        return {
          url:'',
          urlList:[]
        }
      },
      mounted(){
        var id = parseInt(this.$route.params.id,10)
//        alert(typeof id)
//        alert(id)
        if(this.$route.params.id) {
          switch (id) {
            case 1:
              this.url = './static/img/b_img5.jpg';
              this.urlList = [
                {
                  info:"四川丹棱爱媛38号果冻橙 新鲜水果柑桔橘子批发包邮",
                  url:[
                    './static/img/2-1.jpg',
                    './static/img/2-2.jpg',
                    './static/img/2-3.jpg',
                    './static/img/2-4.jpg',
                    './static/img/2-5.jpg',
                    './static/img/2-6.jpg',
                    './static/img/2-7.jpg',
                    './static/img/2-8.jpg',
                    './static/img/2-9.jpg',
                    './static/img/2-10.jpg',
                    './static/img/2-11.jpg',
                    './static/img/2-12.jpg',
                    './static/img/2-13.jpg'
                  ]
                }
            ]
              break;
            case 2:
              this.url = './static/img/b_img3.jpg';
              this.urlList = [
                {
                  info:"鲜故事 圣女果小黄瓜5斤混装小番茄新鲜樱桃西红柿水果黄瓜小柿子",
                  url:[
                    './static/img/2-1.jpg',
                    './static/img/2-2.jpg',
                    './static/img/2-3.jpg',
                    './static/img/2-4.jpg',
                    './static/img/2-5.jpg',
                    './static/img/2-6.jpg',
                    './static/img/2-7.jpg',
                    './static/img/2-8.jpg',
                    './static/img/2-9.jpg',
                    './static/img/2-10.jpg'
                  ]
                }
              ]
              break;
            case 3:
              this.url = './static/img/b_img4.jpg';
              this.urlList = [
                {
                  info:'新鲜香蕉水果banana包邮8斤云南山地种植',
                  url:[
                    "./static/img/1.jpg",
                    "./static/img/2.jpg",
                    "./static/img/3.jpg",
                    "./static/img/4.jpg",
                    "./static/img/5.jpg",
                    "./static/img/6.jpg",
                    "./static/img/7.jpg",
                    "./static/img/8.jpg"
                  ]
                }
              ]
              break;
            case 4:
              this.url = './static/img/b_img6.jpg';
              this.urlList = [
                {
                  info:"RIO锐澳鸡尾酒套装预调酒果酒洋酒3.8度经典275ml*6瓶正品整箱装",
                  url:[
                    './static/img/4-1.jpg',
                    './static/img/4-2.jpg',
                    './static/img/4-3.jpg',
                    './static/img/4-4.jpg',
                    './static/img/4-5.jpg',
                    './static/img/4-6.jpg',
                    './static/img/4-7.jpg',
                    './static/img/4-8.jpg'
                  ]
                }
              ]
              break;
            case 5:
              this.url = './static/img/b_img2.jpg';
              this.urlList = [
                {
                  info:"坚果零食干果仁 奶油味送开口器批发",
                  url:[
                    './static/img/5-1.jpg',
                    './static/img/5-2.gif',
                    './static/img/5-3.jpg',
                    './static/img/5-4.jpg',
                    './static/img/5-5.jpg',
                    './static/img/5-6.jpg',
                    './static/img/5-7.jpg'
                  ]
                }

              ]
              break;
          }
        }
      }
    }
</script>

<style scoped>
  .buy{
    padding:4px 20px;
    font-size: 16px;
    background: red;
    color: white;
    display: inline-block;
    margin:10px 20px;
    border-radius:4px;
    outline: none;
    cursor: pointer;
  }
  .good_bnt{
    border-top:1px solid #ccc;
    background: white;
    font-size: 30px;
    color:red;
  }
  .good_bnt span{
    display: inline-block;
    line-height: 50px;
    padding:0 20px;
  }
  .info_out{
    background: white;
    padding:20px;
  }
  .name{
    text-align: left;
    font-size: 16px;
  }
  .info{
    font-size: 12px;
    text-align: left;
    color:#FF4400;
    line-height: 30px;
  }
  .good_detail{
    background: #fff;
    text-align: center;
    margin:0 auto;
  }
  .good_detail img{
    margin: 0 auto;
    display:block;
  }
</style>
